<!DOCtype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>vue_024_子组件向父组件传值的数据类型</title>

</head>
<body>
    <div id="app">
        组件的注册，关键字：component <br />
        子组件通过自定义事件向父组件传递信息<br />
        1、父组件监听子组件的事件<br />
        <!-- 下面这两个组件属于父组件的模板 -->
        <div :style="{fontSize: textSize + 'px'}">{{text}}</div>
        <!-- big-text这个名称必须和下面的 $emit('big-text') 这个名称保持一致，这样才可以被监听成功 -->
        <menu-item @big-text="bigtext"></menu-item>
        2、子组件向父组件传值，可以通过第二个参数来传递<br />
        子组件传递过来的值，在父组件中通过$event接收，再传递给函数bigtext1中<br />
        <!-- bigtext1($event)这是传递一个参数，如果传递多个参数，则直接写bigtext1 -->
        <menu-item1 @big-text="bigtext1($event)"></menu-item1>
    </div>
    <script src="js/vue.js"></script>
    <script type="text/javascript">
        //component() 两个参数  参数一：组件的名称  参数二：是一个对象
        //组件名称只能出现首写字母大写，其余的都不能大写，如果使用驼峰式的明明方式，在使用组件的时候，只能在模板中使用组件
        // Vue.component("ZujianName",{ //这是驼峰式组件
        Vue.component("menu-item",{
            //对象中两个重要的属性  第一个是data（data的值是一个函数）  第二个是组件的模板内容,关键字 template
            data:function(){
                //对象中放具体的数据
                return {
                    msg:"组件的字体大小"
                }
            },
            //组件的内容实际上就是一个字符串
            // template:"<button @click='method1'>点击了{{count}}次</button>",
            //反引号位于左上角，数字1键的左边、Esc键的下方
            template:`
                <div>
                    <button @click="$emit('big-text')">变大文本字体</button>
                </div>
            `
        });
        Vue.component("menu-item1",{
            //对象中两个重要的属性  第一个是data（data的值是一个函数）  第二个是组件的模板内容,关键字 template
            data:function(){
                //对象中放具体的数据
                return {
                    msg:"组件的字体大小"
                }
            },
            //组件的内容实际上就是一个字符串
            // template:"<button @click='method1'>点击了{{count}}次</button>",
            //反引号位于左上角，数字1键的左边、Esc键的下方
            //$emit是固定写法
            template:`
                <button @click="$emit('big-text',10)">自定义变大文本字体</button>
            `
        });

        var vm = new Vue({
            el:'#app',
            data:{
                text:"父组件的字体大小",
                textSize:10
            },
            methods:{
                bigtext:function(){
                    this.textSize+=5;

                },
                bigtext1:function(val){
                    this.textSize+=val;
                }
            }
        });

    </script>
</body>

</html></SCRIPT>